<template>
  <!--  温度调节  -->
  <div class="tempDiv">
    <!-- 提示框 -->
    <el-alert title="点击查看平均温度±5°C范围内的冬季预测" type="warning" :closable="false" class="message" show-icon />
    <!-- 调温组件 -->
    <div class="adjustTemperature">
      <div ref="minus" class="leftCircle" @click="updateTemp(-1)">
        -
      </div>
      <div class="centerDiv">
        平均温度已调整&nbsp;<span style="color: #6DA3F9">{{ curTemp }}℃</span>
      </div>
      <div ref="plus" class="rightCircle" @click="updateTemp(1)">
        +
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curTemp: 0,
      tempLimit: 5,
      isWinter: true
    }
  },
  // onload() {
  //   this.WatchSize()
  //   watch(window.innerWidth, () => {
  //     this.WatchSize()
  //   })
  // },
  methods: {
    updateTemp(num) {
      const newTemp = this.curTemp + num

      if (newTemp <= 0 - this.tempLimit) {
        this.$refs.minus.style.color = '#999999'
      } else if (newTemp >= this.tempLimit) {
        this.$refs.plus.style.color = '#999999'
      } else {
        this.$refs.plus.style.color = '#6DA3F9'
        this.$refs.minus.style.color = '#6DA3F9'
      }
      if (newTemp < 0 - this.tempLimit || newTemp > this.tempLimit) {
        return
      }
      this.curTemp = newTemp
      this.$emit('listen', newTemp)
    },
    // WatchSize() {
    //   // this.isWinter = window.innerWidth <= 768
    //   if (window.innerWidth <= 500) {
    //     this.isWinter = true
    //   } else {
    //     this.isWinter = false
    //   }
    // }
  },
  mounted() {
    window.addEventListener('resize', this.WatchSize);
  },
}
</script>
<style scoped lang="scss">
.tempDiv {
  position: absolute;
  bottom: 3rem;
  left: 10vw;
  width: 80vw;
  height: 26vw;
  padding: 2vw;
  display: flex;
  flex-direction: column;
  /* 垂直排列 */
  justify-content: space-between;
  align-items: center;

  /* 水平居中 */
  .message {
    display: flex;
    align-items: center;
    /* 垂直方向居中 */
  }

  .adjustTemperature {
    background: #EBEBEB;
    border-radius: 30px;
    display: flex;
    padding: 1vw;

    .leftCircle {
      background: #FFFFFF;
      color: #6DA3F9;
      width: 14vw;
      height: 14vw;
      border-radius: 7vw;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .rightCircle {
      background: #FFFFFF;
      color: #6DA3F9;
      width: 14vw;
      height: 14vw;
      border-radius: 7vw;
      text-align: center;
      /* align-content: center; */
      display: flex;
      align-items: center;
      font-size: 18px;
      justify-content: center;
    }

    .centerDiv {
      width: 52vw;
      font-size: 1rem;
      text-align: center;
      align-content: center;
      display: flex;
      align-items: center;
      justify-content: center;
      /* //font-family: PingFandgSC-Medium; */
    }
  }
}

.tempDiv>>>.el-alert {
  border-radius: 15px;
  /* 设置圆角 */
  overflow: hidden;
  /* 确保内容不超出边界 */
  height: 30px;
}

.tempDiv .message>>>.el-alert__content {
  display: flex;
  align-items: center;
}

.tempDiv .message>>>.el-alert__icon {
  display: flex;
  align-items: center;
}

.tempDiv .message>>>.el-alert__title {
  line-height: 1.5;
  /* 调整行高，确保文本垂直居中 */
  font-size: 10px;
  /* 可根据需要调整字体大小 */
}

.tempDiv>>>.el-alert--warning.is-light {
  background-color: rgba(109, 163, 249, 0.10);
  color: rgba(109, 163, 249, 1)
}

.tempDivWinter {
  position: absolute;
  bottom: 0.31rem;
  left: 30vw;
  width: 40vw;
  height: 10vw;
  padding: 1vw;
  display: flex;
  flex-direction: column;
  /* 垂直排列 */
  justify-content: space-between;
  align-items: center;
  /* background: red;  */

  /* 水平居中 */
  .message {
    display: flex;
    align-items: center;
    /* 垂直方向居中 */
  }

  .adjustTemperature {
    background: #EBEBEB;
    border-radius: 30px;
    display: flex;
    padding: 1vw;

    .leftCircle {
      background: #FFFFFF;
      color: #6DA3F9;
      width: 4vw;
      height: 4vw;
      border-radius: 4vw;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .rightCircle {
      background: #FFFFFF;
      color: #6DA3F9;
      width: 4vw;
      height: 4vw;
      border-radius: 4vw;
      text-align: center;

      display: flex;
      align-items: center;
      justify-content: center;

    }

    .centerDiv {
      height: 10px;
      width: 30vw;
      font-size: 5px;
      text-align: center;
      align-content: center;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      /* //font-family: PingFangSC-Medium; */
    }
  }

}

.tempDivWinter>>>.el-alert {
  border-radius: 15px;
  /* 设置圆角 */
  overflow: hidden;
  /* 确保内容不超出边界 */
  height: 30px;
}

.tempDivWinter .message>>>.el-alert__content {
  display: flex;
  align-items: center;
}

.tempDivWinter .message>>>.el-alert__icon {
  display: flex;
  align-items: center;
}

.tempDivWinter .message>>>.el-alert__title {
  line-height: 1.5;
  /* 调整行高，确保文本垂直居中 */
  /* font-size: 10px; */
  /* 可根据需要调整字体大小 */
}

.tempDivWinter>>>.el-alert--warning.is-light {
  background-color: rgba(109, 163, 249, 0.10);
  color: rgba(109, 163, 249, 1)
}
</style>
